<template>
	<div class="app-container">
		<div class="search-container">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<!-- StartDate  EndDate -->
				<el-form-item label="关键字" prop="keywords">
					<el-input
						v-model="queryParams.keywords"
						placeholder="请输入关键字"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="通知类型" prop="noticeType">
					<el-select
						v-model="queryParams.noticeType"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
						placeholder="请选择通知类型">
						<el-option
							v-for="item in AppNoticeType"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery"
					>
						<i-ep-search/>
						搜索
					</el-button
					>
					<el-button @click="resetQuery">
						<i-ep-refresh/>
						重置
					</el-button
					>
				</el-form-item>
			</el-form>
		</div>
		
		<el-card shadow="never">
			<template #header>
				<div class="flex justify-between">
					<div>
						<el-button type="success" @click="openDialog()"
											 v-hasPerm="['sys:notify:add']"
						>
							<i-ep-plus/>
							新增
						</el-button
						>
					</div>
				</div>
			</template>
			
			<el-table
				v-loading="loading"
				:data="tableList"
				highlight-current-row
				border
			>
				<el-table-column
					label="序号"
					type="index"
					width="60"
					align="center"
				></el-table-column>
				<el-table-column
					key="title"
					label="标题"
					align="center"
					prop="title"
					width=""
				/>
				<el-table-column
					key="content"
					label="通知内容"
					align="center"
					width=""
					prop="content"
				>
					<template #default="scope">
						<span v-html="scope.row.content"></span>
					</template>
				</el-table-column>
				<el-table-column
					key="noticeTypeName"
					label="公告类型"
					width=""
					align="center"
					prop="noticeTypeName"
				>
				</el-table-column>
				<el-table-column
					key="isTop"
					label="是否置顶"
					width=""
					align="center"
					prop="isTop"
				>
					<template #default="scope">
						<el-tag :type="scope.row.isTop === '已置顶' ? '' : 'info'">
							<el-icon v-if="scope.row.isTop === '已置顶'" color="#409eff"><StarFilled/></el-icon>
							{{scope.row.isTop}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					key="createTime"
					label="创建时间"
					width=""
					align="center"
					prop="createTime"
				/>
				<el-table-column
					key="updateTime"
					label="更新时间"
					width=""
					align="center"
					prop="updateTime"
				/>
				<el-table-column label="操作" fixed="right" :width="mobile === 'mobile' ? 90 : 220">
					<template #default="scope">
						<el-button
							type="primary"
							link
							size="small"
							v-hasPerm="['sys:notify:top']"
							@click="doTopNotify(scope.row.id)"
						>
<!--							<i-ep-start/>-->
							<el-icon><StarFilled /></el-icon>
							置顶
						</el-button
						>
						<el-button
							type="primary"
							link
							size="small"
							v-hasPerm="['sys:notify:edit']"
							@click="openDialog(scope.row.id)"
						>
							<i-ep-edit/>
							编辑
						</el-button
						>
<!--						<el-button-->
<!--							type="primary"-->
<!--							link-->
<!--							size="small"-->
<!--							v-hasPerm="['sys:notify:add']"-->
<!--							@click="openDetail(scope.row.id, '详情')"-->
<!--						>-->
<!--							<i-ep-grid/>-->
<!--							详情-->
<!--						</el-button-->
<!--						>-->
						<el-button
							type="primary"
							link
							size="small"
							v-hasPerm="['sys:notify:delete']"
							@click="handleDelete(scope.row.id)"
						>
							<i-ep-delete/>
							删除
						</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			
			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageIndex"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>
		
		<!-- 新增/修改弹窗 -->
		<addForm
			v-if="dialogAddOrEdit.visible"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
			:currentSystem="currentSystem"
			:dialog-add-or-edit="dialogAddOrEdit"
			@sendClose="sendClose"
		></addForm>
		
	</div>
</template>

<script lang="ts">
export default {
	name: "app/notify",
};
</script>

<script lang="ts" setup>
import {NotifyListForm, ParamsType} from "@/api/system/app/notify/types";
import {getDicts} from "@/store/modules/dict";
import addForm from "@/views/system/app/notify/addForm";
import {getNotifyList, deleteNotify, topNotify} from "@/api/system/app/notify/index";

import {useScreen} from "@/store/modules/screen";
import {computed} from "vue";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenHeight = computed(() => ( screenStore.screenHeight ));
function initScreen(){
}

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const teamList = ref();
const tableList = ref<NotifyListForm[]>();
const queryParams = reactive<ParamsType>({
	pageIndex: 1,
	pageSize: 20,
});
const dialogAddOrEdit = reactive<DialogOption>({
	visible: false,
	title: "新增通知信息",
	footBtn: "新增",
});
const dialogDetail = reactive<DialogOption>({
	visible: false,
	title: "通知详情信息",
	footBtn: "",
});


/* 列表查询 */
async function handleQuery() {
	loading.value = true;

	let list = await getNotifyList(queryParams);
	if (list.type === 0) {
		if (list.success) {
			tableList.value = list.data.list;

			queryParams.pageIndex = list.data.pageNum;
			queryParams.pageSize = list.data.pageSize;
			total.value = list.data.total;
		} else {
			ElMessage.error(list.msg);
		}
	} else {
		ElMessage.error(list.msg);
	}
	loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageIndex = 1;
	queryParams.pageSize = 20;
	queryParams.startDate = null;
	queryParams.endDate = null;
	handleQuery();
}

onMounted(async () => {
	initScreen()
	
	handleQuery();
});

function doTopNotify(id) {
	topNotify(id).then(data => {
		if(data.success){
			ElMessage.success(data.msg)
			handleQuery();
		}else {
			ElMessage.error(data.msg)
			handleQuery();
		}
	})
}

/* 新增/编辑 */
function openDialog(id, detail) {
	dialogAddOrEdit.visible = true;
	if (id) {
		dialogAddOrEdit.title = "修改通知信息";
		dialogAddOrEdit.footBtn = "修改";
		dialogAddOrEdit.id = id;
		dialogAddOrEdit.detail = detail;
	} else {
		dialogAddOrEdit.id = 0;
		dialogAddOrEdit.title = "新增通知信息";
		dialogAddOrEdit.footBtn = "新增";
	}
}

function openDetail(id, detail) {
	dialogDetail.visible = true;
	dialogDetail.detail = detail;
	dialogDetail.title = "通知详情信息";
	dialogDetail.footBtn = "";
	dialogDetail.id = id;
}

/* 关闭弹窗并刷新列表 */
function sendClose(query) {
	dialogAddOrEdit.visible = false;
	dialogDetail.visible = false;
	if (query) {
		handleQuery();
	}
}

/* 删除 */
async function handleDelete(id) {
	let confirm = await ElMessageBox.confirm("确认删除?", "删除提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消！'
		})
		return;
	}
	let delInfo = await deleteNotify(id);
	if (delInfo.type === 0) {
		if (delInfo.success) {
			ElMessage.success(delInfo.msg);
			resetQuery();
		} else {
			ElMessage.error(delInfo.msg);
		}
	} else {
		ElMessage.error(delInfo.msg);
	}
}

const AppNoticeType = getDicts('appNoticeType')	//通知公告类型
</script>

<style lang="less" scoped></style>
